<template>
	<view class="content">
	    <view class="addlist">
	    		<view class="nameBox">
	    			<view class="nameLeft">
	    				<text class="name">姓名</text>
	    				<text class="wyyname">
							ئىسىم
						</text>
	    			</view>
	    			<view class="nameRight">
	    				<input class="inputname" v-model="real_name" type="text" placeholder="请输入姓名" />
	    			    <text class="wyyname wyy">
	    					ئىسىم - فامىلىڭىزنى كىرگۈزۈڭ
	    			    </text>
	    			</view>
	    		</view>
	    		<view class="nameBox">
	    			<view class="nameLeft">
	    				<text class="name">手机号码</text>
	    				<text class="wyyname">
							يان تېلېفون نومۇرى
	    				</text>
	    			</view>
	    			<view class="nameRight">
	    				<input class="inputname"v-model="phone" type="text" placeholder="请输入手机号码" />
	    			    <text class="wyyname wyy">
	    					يان تېلېفون نومۇرىنى كىرگۈزۈڭ
	    			    </text>
	    			</view>
	    		</view>
				
	    		<view class="nameBox">
	    			<view class="nameLeft">
	    				<text class="name">验证码</text>
	    				<text class="wyyname">
	    					تەكشۈرۈش نومۇرى
	    				</text>
	    			</view>
	    			<view class="nameRight">
						<button type="button"  v-if="input" class="send" @click='getCode' :disabled='disabled'>
							<view class="yzname">
								{{btnTitle}}
							</view>
							<view class="yzwyy">
								دەلىللەش نۇمۇرىغا ئېرىشىش
							</view>
						</button>
						<view  v-if="show" class="yzBox" >
							<input type="text" v-model="verify_code" class="yzinput" placeholder="请输入验证码"/>
							<view class="yztime">
							{{btn}}
							</view>
						</view>
	    			</view>
	    		</view>
				
	    		<view class="nameBox">
	    			<view class="nameLeft">
	    				<text class="name">身份证号码</text>
	    				<text class="wyyname">
	    					كىملىك نومۇرى
	    				</text>
	    			</view>
	    			<view class="nameRight">
	    				<input class="inputname" type="idcard" v-model="card_id" placeholder="请输入身份证号码" />
	    			    <text class="wyyname wyy">
	    					كىملىك نومۇرىنى كىرگۈزۈڭ
	    		        </text>
	    			</view>
	    		</view>
	    </view>
		
		<view class="tianjiaBox" @click="submit">
			<text class="tianjia">提交</text>
			<text class="wyytianjia">
				تاپشۇرۇش
			</text>
		</view>
	</view>
</template>

<script>
	import app from '@/util/api.js'
	export default {
		data() {
			return {
				code:'',
				btnTitle:'获取验证码',
				btn:'',
				input:true,
				disabled:false,
				show:false,
				real_name:'',
				phone:'',
				verify_code:'',
				card_id:''
			}
		},
		methods: {
			getCode(){
			                if(!/^1[345678]\d{9}$/.test(this.phone)){
			                    app.toast('手机号码错误');
			                }else{
			                    this.validateBtn()
								this.show = true
								this.input = false
								let data = {
									phone:this.phone
								}
			                    app.request('user/sendSms',data,"POST").then(res =>{
			                        
			                        // if(res.data.code == '1'){
			                        //     this.$toast("验证码已发送，请注意查收。");
			                        // }else{
			                        //     this.$toast(res.data.message);
			                        // }
			                    })
			                } 
			            },
			            validateBtn(){
			                //倒计时
			                let time = 60;
			                let timer = setInterval(() => {
			                if(time == 0) {
			                    clearInterval(timer);
			                    this.disabled = false;
								this.show = false;
								this.input = true
			                } else {
			                    this.btn=time + 's';
			                    this.disabled = true;
			                    time--
								
			                }
			                },1000)
			            },
			 submit(){
				 if(!this.real_name){
				 	app.toast("请输入姓名")
				 	return
				 }
				 if(!app.isphoneNumber(this.phone)){
				 	app.toast('请输入正确手机号')
				 	return
				 }
				 if(!verify_code){
					 app.toast('验证码错误')
					 return
				 }
				 if(!this.card_id){
				 	app.toast("请输入正确身份证号")
				 	return
				 }
				 app.load()
				 let data = {
real_name:'',
				phone:'',
				verify_code:'',
				card_id:''
				 }
				 app.request('user/auth',data,"POST").then(res =>{
					 app.hide()
					 app.toast("提交成功")
					 setTimeout(()=>{
					 	app.back()
					 },500)
			    })
			 }
		}
	}
</script>

<style scoped> 
.content{
	min-height: 100vh;
	background-color: #f5f5f5;
}
.tianjiaBox{
		width: 100vw;
		background-color: #FFC03C;
		padding: 22rpx 0 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #FFFFFF;
		font-size: 30rpx;
		position: fixed;
		bottom: 0;
	}
	.wyytianjia{
		font-size: 24rpx;
		padding-top: 13rpx;
	}
	.addlist{
		padding: 0 30rpx;
		background-color: #FFFFFF;
	}
	.nameBox{
		border-bottom: 1rpx #eee solid;
		padding: 35rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: #333333;
	}
	.nameBox:nth-last-child(1){
		border-bottom: 0rpx #eee solid;
	}
	.nameLeft{
		display: flex;
		flex-direction: column;
	}
	.name{
		font-size: 30rpx;
		line-height: 30rpx;
	}
	.wyyname{
		font-size: 24rpx;
		padding-top: 18rpx;
	}
	.nameRight{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.inputname{
		font-size: 30rpx;
		text-align: right;
	}
	.wyy{
		color: #999999;
	}
	.send{
		background-color: #FFFFFF;
		border-radius: 10rpx;
		border: 1rpx #FFC03C solid;
		color: #FFC03C;
		padding: 14rpx 5rpx 10rpx;
		text-align: center;
	}
	.yzname{
		font-size: 24rpx;
		line-height: 24rpx;
	}
	.yzwyy{
		font-size: 20rpx;
		line-height: 18rpx;
		padding-top: 10rpx;
	}
	.yzBox{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.yzinput{
		font-size: 30rpx;
		text-align: right;
	}
	.yztime{
		width: 60rpx;
		font-size: 24rpx;
		color: #FFC03C;
		text-align: center;
		padding-left: 14rpx;
	}
</style>
